<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>初识canvas</title>
  <style>
      #cs {
          background-color: aquamarine;
      }
  </style>
</head>

<body>
<canvas height="300" id="cs" width="400"></canvas>

</body>
<script>
  let cs = document.querySelector('#cs')
  let ctx = cs.getContext('2d') // 画笔

  // 起笔
  ctx.beginPath()

  ctx.moveTo(100, 100)
  ctx.lineTo(200, 100)
  ctx.lineTo(200, 200)
  ctx.lineTo(100, 100)
  ctx.stroke()
  // 抬笔
  ctx.closePath()

  // 起笔
  ctx.beginPath()

  ctx.moveTo(100, 150)
  ctx.lineTo(100, 250)
  ctx.lineTo(200, 250)
  ctx.lineTo(100, 150)
  ctx.fill()
  // 抬笔
  ctx.closePath()
</script>

</html>